<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页 甄别您选购的商品</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/item.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <!-- 一级导航开始 -->
    <div class="header-top clearfix" id="nav-top">
        <nav>
            <a href="" class="logo"></a>
            <ul class="nav-right">
                <li><a href="">资质证照 / 协议规则</a></li>
                <li class="addshop"><a href="javascript:;">添加良品</a></li>
                <li class="message">
                    <a href="">消息</a>
                    <!-- 信息二级菜单开始 -->
                    <ul>
                        <li>动态<span>0</span></li>
                        <li>评论<span>0</span></li>
                        <li>私信<span>0</span></li>
                        <li>粉丝<span>0</span></li>
                        <li>喜欢<span>0</span></li>
                        <li>通知<span>0</span></li>
                    </ul>
                </li>
                <li class="cart-nav">
                    <a href="javascript:;" onclick="toMycart()">购物车</a>
                    <!-- 购物车二级菜单开始 -->
                    <ul>
                        <li>您的购物车暂时还没有商品...</li>
                        <li>快去抢购良仓商品吧</li>
                    </ul>

                </li>
                <li><a href="reg.html" class="reg">注册</a></li>
                <li><a href="login.html" class="login">登录</a></li>
            </ul>
        </nav>
    </div>
    <!-- 二级导航开始 -->
    <div class="subMenu">

        <ul class="clearfix">
            <li><a href="index.html">首页</a> </li>
            <li class="cartcon">
                <a href="shop.html">商店</a>
                <!-- 商店二级菜单开始 -->
                <div class="cart-list">
                    <a href="">家居</a>
                    <a href="">文具</a>
                    <a href="">数码</a>
                    <a href="">玩乐</a>
                    <a href="">餐厨</a>
                    <a href="">美食</a>
                    <a href="">服装</a>
                    <a href="">鞋包</a>
                    <a href="">配饰</a>
                    <a href="">美护</a>
                    <a href="">出行</a>
                    <a href="">图书</a>
                    <a href="">艺术</a>
                    <a href="">水具</a>
                    <a href="">运动</a>
                </div>
            </li>
            <li class="zazhicon">
                杂志
                <!-- 杂志二级菜单开始 -->
                <div class="zazhi">
                    <a href="">趣物</a>
                    <a href="">数码</a>
                    <a href="">汽车</a>
                    <a href="">文化</a>
                    <a href="">时尚</a>
                    <a href="">美食</a>
                    <a href="">建筑</a>
                    <a href="">空间</a>
                    <a href="">圈子</a>
                    <a href="">清单</a>
                    <a href="">活动</a>
                    <a href="">视频</a>
                </div>
            </li>
            <li class="sharecon">
                分享
                <!-- 分享二级菜单开始 -->
                <div class="share-list">
                    <a href="">男士</a>
                    <a href="">家居</a>
                    <a href="">数码</a>
                    <a href="">工具</a>
                    <a href="">玩具</a>
                    <a href="">美容</a>
                    <a href="">孩子</a>
                    <a href="">宠物</a>
                    <a href="">饮食</a>
                    <a href="">运动</a>
                    <a href="">文化</a>
                    <a href="">女士</a>
                </div>
            </li>
            <li>达人</li>
            <li>有偿资讯</li>
            <li></li>
        </ul>

    </div>
    <!-- 详情页开始 -->
    <div class="items clearfix">
        <!-- <div class="item-left">
            <img src="./img/1767.jpg" alt="">
        </div>
        <div class="item-right">
            <div class="item-rightcon1">
                556
            </div>
            <div class="item-rightcon2">
                <a href="">山田土</a>
            </div>
            <div class="item-rightcon3">
                虎年贺岁茶礼 | 虎头造型 有新意有彩头
            </div>
            <div class="item-rightcon4">
                价格:&nbsp;&nbsp;
                <span>¥358元</span>

            </div>
            <div class="item-rightcon5">
                <span>免运费</span>
                <span>正品授权</span>
            </div>
            <div class="item-rightcon6">
                数量:&nbsp;&nbsp;
                <span>套装</span>

            </div>
            <div class="item-rightcon7">
                数量:&nbsp;&nbsp;
                <input type="number" value="1" min="1">
            </div>
            <div class="item-rightcon8">
                <a>立即购买</a>
            </div>
            <div class="item-rightcon9">
                <a href="">
                    <span class="gouwu">加入购物车</span>
                </a>

                <a href="">
                    <span class="fenxiang">分享</span>
                </a>

            </div>
        </div> -->
        <!-- 猜你喜欢开始 -->
        <!-- <div class="lovecart">
            <h4 >猜你喜欢</h4>
            <div class="lovecartcon">
                <img src="./img/282412.jpg" alt="">
                <p>特级云雾茶礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥398</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282411.jpg" alt="">
                <p>特级太平猴魁茶礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥698</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282296.jpg" alt="">
                <p>2022茶书礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥198</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282275.jpg" alt="">
                <p>上品青柑</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥148</p>
            </div>

        </div>
        <div class="item-img">
            <img src="./img/1639546441240612.jpg" alt="">
        </div>     -->
    </div>

    <!-- 底部 -->
    <div class="service">
        <a href="">
            <p></p>
        </a>

        <div class="slogen">
            <dl>
                <dt></dt>
                <dd>
                    <p>全球精品</p>
                    <p>Global Selections</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>正品保证</p>
                    <p>Authenticity Guaranteed</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>全场包邮</p>
                    <p>Free Delivery</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>400-897-6363</p>
                    <p>工作日 09:00-18:00</p>
                </dd>
            </dl>

        </div>

    </div>
    <!-- 售后结束尾部开始 -->
    <div class="footer">
        <div class="wrap">
            <div class="footleft">
                <div class="download">
                    <p><span>iPhone Android</span></p>
                    <p>客户端下载</p>
                </div>
                <div class="friendly">
                    <p>
                        <a href="">关于良仓</a>
                        <a href="">服务协议</a>
                        <a href="">隐私保护政策</a>
                        <a href="">使用指南</a>
                        <a href="">联系我们</a>
                        <a href="">加入我们</a>
                        <a href="">友情链接</a>
                        <a href="">私信良仓</a>
                    </p>

                    <p>
                        <span>©</span>
                        2013-2019 北京良仓文化传播有限公司版权所有
                    </p>
                    <p> &nbsp;&nbsp; 公司名称：北京良仓文化传播有限公司 电话：010-58696733</p>
                    <p> &nbsp;&nbsp; 公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
                    <p> &nbsp;&nbsp; 社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
                    <p> &nbsp;&nbsp; 图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号 </p>
                    <p>&nbsp;&nbsp; 京ICP备13010677号 京公网安备&nbsp;&nbsp;11010502025627</p>

                </div>

            </div>

            <div class="footright">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

            </div>
        </div>


    </div>

    <!-- 尾部结束 右固定锚点开始 -->

    <div class="right-btn">
        <img src="./img/30892.png" alt="">
    </div>
    <div class="bottom-btn">
        <a href="#nav-top"></a>
    </div>
    <div class="popbar">
        <a href="javascript:;">联系客服</a>
    </div>
    <div class="kefu">
        <p>如有问题，请联系运营</p>
        <p><span style="margin-right: 20px;">tel:</span>13598613871</p>
        <button>关闭</button>

    </div>

    <script>
        //获取a标签携带过来的商品id
        let searchstr = new URLSearchParams(location.search);
        let pid = searchstr.get("id");
        console.log(pid);

        //根据pid查询商品详情
        /* 接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
        接口请求方式：get
        接口参数：
        id  商品的id*/
        let detailAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
        $.get(detailAPI, { id: pid }).then(r => {
            console.log(r.data);
            let obj = r.data;
            let str = "";
            str += `
            <div class="item-left">
            <img src="${obj.pimg}" alt="">
        </div>
        <div class="item-right">
            <div class="item-rightcon1">
                668
            </div>
            <div class="item-rightcon2">
                <a href="">${obj.pname}</a>
            </div>
            <div class="item-rightcon3">
                ${obj.pdesc}
            </div>
            <div class="item-rightcon4">
                价格:&nbsp;&nbsp;
                <span>￥${obj.pprice}</span>

            </div>
            <div class="item-rightcon5">
                <span>免运费</span>
                <span>正品授权</span>
            </div>
            <div class="item-rightcon6">
                数量:&nbsp;&nbsp;
                <span>套装</span>

            </div>
            <div class="item-rightcon7">
                数量:&nbsp;&nbsp;
                <input type="number" value="1" min="1">
            </div>
            <div class="item-rightcon8">
                <a>立即购买</a>
            </div>
            <div class="item-rightcon9">
                <a href="javascript:;" onclick="addCart()">
                    <span class="gouwu">加入购物车</span>
                </a>

                <a href="">
                    <span class="fenxiang">分享</span>
                </a>

            </div>
        </div>
        <!-- 猜你喜欢开始 -->
        <div class="lovecart">
            <h4 >猜你喜欢</h4>
            <div class="lovecartcon">
                <img src="./img/282412.jpg" alt="">
                <p>特级云雾茶礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥398</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282411.jpg" alt="">
                <p>特级太平猴魁茶礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥698</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282296.jpg" alt="">
                <p>2022茶书礼盒</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥198</p>
            </div>

            <div class="lovecartcon">
                <img src="./img/282275.jpg" alt="">
                <p>上品青柑</p>
                <p style="font-size: 12px;color: rgb(153,153,153);">道仁行</p>
                <p style="color: #3193F3;">￥148</p>
            </div>

        </div>
        <div class="item-img">
            <img src="${obj.pimg}" alt="">
        </div>    
            `;
            $(".items").html(str)
        })
        //添加购物车
        function addCart() {
            /*  接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
         接口请求方式：get
         接口参数：
         uid  用户id
         pid  商品id
         pnum  要添加的商品数量 */
            //获取参数
            let uid = localStorage.getItem("id");
            let pnum = $(".item-rightcon7 input").val();
            let ProductAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            $.get(ProductAPI, { uid, pid, pnum }).then(r => {
                console.log(r);
                if (uid) {
                    alert("加入购物车成功")
                } else {
                    alert("请登录您的账号")
                }

            })
        }

        //判断是否登录跳转页面
        function toMycart() {
            let uid = localStorage.getItem("id");
            if (uid) {
                location.href = "cart.html"
            } else {
                location.href = "login.html"
            }
        }

        //判断是否登录
        let Mytoken = localStorage.getItem("token");
        let Myusername = localStorage.getItem("username")
        console.log(Mytoken);
        console.log(Myusername);
        if (Mytoken) {
            $(".addshop").click(function () {
                location.href = "./后台管理/index.html"
            })
            $(".reg").html(Myusername)
            $(".login").html("hello")
        } else {
            $(".addshop").click(function () {
                alert("请您登录账号后再操作哈")
            })
        }

        //联系客服按钮控制
        $(".popbar a").click(function () {
            $(".kefu").css("display", "block")
        })
        $(".kefu button").click(function () {
            $(".kefu").css("display", "none")
        })
    </script>

</body>

</html>